<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#d1 {
				border: 1px solid black;
				width: 120px;
			}

			#d2 {
				border-bottom: 1px solid black;
			}

			input {
				border: 0px;
				background-color: white;
			}
			#t{
				width: 50px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				var $choose = $("#choose input");
				// 全选
				$("#all,.i0").click(function() {
					$choose.each(function() {
						$(this).prop("checked", "checked");
					});
					$(".i0").prop("checked",true);
				});
				
				// 反选
				$("#reverse").click(function() {
					$choose.each(function() {
						$(this).prop("checked", !$(this).prop("checked"));						
					});
					// 所有复选框（全选除外）
					var len = $(":checkbox[name=items]").length;
					// 已选复选框
					var alen = $(":checkbox[name=items]:checked").length;
					
					if(len == alen){
						$(".i0").prop("checked",true);
					}else if(alen == 0){
						$(".i0").prop("checked",false);
					}else{
						$(".i0").prop("checked",false);
					}
				});
				
				// 全选框更新
				$(".only").click(function(){
					// 所有复选框（全选除外）
					var len = $(":checkbox[name=items]").length;
					// 已选复选框
					var alen = $(":checkbox[name=items]:checked").length;
					
					if(len == alen){
						$(".i0").prop("checked",true);
					}else if(alen == 0){
						$(".i0").prop("checked",false);
					}else{
						$(".i0").prop("checked",false);
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				<input type="checkbox" class="i0" />
				<input type="button" value="全选" id="all"/>
				<input type="button" value="反选" id="reverse"/>
			</div>
			<div id="choose">

				<input type="checkbox" class="only" name="items" value="选项一"/>选项一
				<br>

				<input type="checkbox" class="only" name="items" value="选项二"/>选项二
				<br>

				<input type="checkbox" class="only" name="items" value="选项三"/>选项三
				<br>

				<input type="checkbox" class="only" name="items" value="选项四"/>选项四
				<br>

				<input type="checkbox" class="only" name="items" value="选项五"/>选项五
				<br>

				<input type="checkbox" class="only" name="items" value="选项六"/>选项六
				<br>

				<input type="checkbox" class="only" name="items" value="选项七"/>选项七
				<br>

				<input type="checkbox" class="only" name="items" value="选项八"/>选项八
				<br>

				<input type="checkbox" class="only" name="items" value="选项九"/>选项九
				<br>

				<input type="checkbox" class="only" name="items" value="选项十"/>选项十
				<br>
			</div>
		</div>

	</body>
</html>
